Hey there.
In this lecture, we're going to be taking a look at another unique GUI object called a canvas group.
Let me go ahead and insert one into my screen GUI.
And the purpose of a canvas group is to render multiple different GUI objects together with a universally
applied color and transparency.
Different GUI objects have different transparency properties.
For example, with a text label, the text label has a background transparency property, but it also
has a text transparency and it also has a text stroke transparency.
With a regular frame, this one's only going to have a background transparency.
And if you have, let's say a UI stroke applied to a frame, this is going to have another transparency
property just called transparency.
These different names can make it very difficult to fade in or fade out an entire GUI at once.
So this is what the canvas group solves.
Whenever you have any GUI objects.
As a descendant of the canvas group, it's going to apply the group color and the group transparency
to all of the objects at once.
This means you can change the transparency of multiple GUI objects from one property.
Let's go ahead and take a look at the canvas group.
It's basically just another frame, so let me move it here into the center of the screen.
And as you can see we have background colors, a background transparency size position.
It's basically just another frame, but with two other extra properties to manipulate the group color
and the group transparency.
So let me go ahead and convert it to scale and then let me scale up my canvas group.
And let me go ahead and find where my frame went.
Actually, let me change the color to like a bright green or something like that.
Where is my frame?
My frame is somewhere.
Maybe I'll reposition it because the canvas group automatically cuts all of the descendants.
So canvas groups will automatically clip all of the descendants and you can't disable it.
So just something to keep in mind.
They will always clip descendants no matter what, and let me find my text label as well.
Let me go ahead and put it somewhere back inside of the bounds of my canvas group.
Okay, here's my text label, here's my frame.
Let me go ahead and just manipulate my text label a bit.
Make it like a blue color.
We'll scale up the text and we'll just say something like hello there, change up the font, we'll do
something like that.
Scale it around.
Oops.
We scale this bad boy up.
Okay, cool.
Scale this guy up or something.
Do that and then let's increase the thickness of that.
Let's make this, I don't know, pink.
We'll do something like that.
Okay.
Here we have a bunch of elements inside of our canvas groups.
Now, traditionally, if we didn't have a canvas group, we would have to go through each one of these
objects one by one.
Find out which one of these properties is the transparency property.
So you'd probably have to have a bunch of if statements checked to see if the object is a text label,
or if it's a frame, or if it's a stroke, and then apply a different transparency property to tween.
But with a canvas group, we can literally adjust the group transparency property to fade out the entire
GUI at once.
So as I increase this, you can see that all of the elements in my GUI are being faded out together.
There's no need for me to go in and mess around with all the individual different transparency properties
for each GUI object.
We can also alter the color of the group.
So if I wanted to apply a universal color to all of the objects in my group, I can do that from this
property as well.
So as you can see, the colors are mixing together to make some different and weird colors.
If you want to keep them with their regular colors, you just have this at white.
For canvas groups are pretty simple.
It's just a frame that allows you to change the transparency and color of the group all at once.
That's basically all there is to it.
So that's all for me in this lecture.
And in the next lecture, I have a challenge for you to practice some of the information you've just
learned in this section.
See you there.